/* 标题 */
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:normal;line-height:1;color:#999}
h1,h2,h3{margin-top:20px;margin-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}


[v-cloak] {
    display: none;
}

/* 强调 */
p{margin-bottom:10px}		/*段落*/
small{font-size:85%}		/*小型文本*/
b,strong {font-weight: bold}	/*重要的文本，加粗*/
em{font-style:italic}		/*被强调的文本*/
i{}				/*斜体*/
u{}				/*加下划线*/
cite{font-style:normal}		/*引用*/
mark{color:#000;background:#ff0}/*突出显示文本*/
var{}				/*变量*/
kbd{}				/*键盘文本*/
code{}				/*计算机代码文本*/
dfn{font-style: italic}	/*一个定义项目*/
del{font-family:Simsun}		/*删除线*/
code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em}
pre{white-space: pre-wrap}	/*预格式化的文本*/
.uppercase{text-transform:uppercase} /*文字大写*/
.lowercase{text-transform:lowercase} /*文字小写*/
.capitalize{text-transform:capitalize} /*首字母大写*

/* 对齐 */
.text-l{text-align:left}/*水平居左*/
.text-r{text-align:right}/*水平居中*/
.text-c{text-align:center}/*水平居右*/
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{ vertical-align:top!important}/*上下居顶*/
.va-m{ vertical-align:middle!important}/*上下居中*/
.va-b{ vertical-align:bottom!important}/*上下居底*/

/* 定位 */
.pos-r{position:relative}
.pos-a{position:absolute}
.pos-f{position:fixed}

/* 浮动 */
.f-l{float:left!important;_display:inline}
.f-r{float:right!important;_display:inline}

/* 文字溢出 */
.text-overflow{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}

/* 线条 */
.line{ font-size: 0px; line-height: 0px; border-top: solid 1px #ddd; float: none}

/* 外边距 */
.mt-5{margin-top:5px}/*距上5像素*/
.mt-10{margin-top:10px}/*距上10像素*/
.mt-15{margin-top:15px}/*距上15像素*/
.mt-20{margin-top:20px}/*距上20像素*/
.mt-25{margin-top:25px}/*距上25像素*/
.mt-30{margin-top:30px}/*距上30像素*/
.mt-35{margin-top:35px}/*距上35像素*/
.mt-40{margin-top:40px}/*距上40像素*/
.mt-50{margin-top:50px}/*距上50像素*/

.mb-5{margin-bottom:5px}/*距下5像素*/
.mb-10{margin-bottom:10px}/*距下10像素*/
.mb-15{margin-bottom:15px}/*距下15像素*/
.mb-20{margin-bottom:20px}/*距下20像素*/
.mb-25{margin-bottom:25px}/*距下25像素*/
.mb-30{margin-bottom:30px}/*距下30像素*/
.mb-35{margin-bottom:35px}/*距下35像素*/
.mb-40{margin-bottom:40px}/*距下40像素*/
.mb-50{margin-bottom:50px}/*距下50像素*/

.ml-5{margin-left:5px}/*距左5像素*/
.ml-10{margin-left:10px}/*距左10像素*/
.ml-15{margin-left:15px}/*距左15像素*/
.ml-20{margin-left:20px}/*距左20像素*/
.ml-30{margin-left:30px}/*距左30像素*/
.ml-40{margin-left:40px}/*距左40像素*/
.ml-50{margin-left:50px}/*距左50像素*/

.mr-5{margin-right:5px}/*距右5像素*/
.mr-10{margin-right:10px}/*距右10像素*/
.mr-15{margin-right:15px}/*距右15像素*/
.mr-20{margin-right:20px}/*距右20像素*/
.mr-30{margin-right:30px}/*距右30像素*/
.mr-40{margin-right:40px}/*距右40像素*/
.mr-50{margin-right:50px}/*距右50像素*/

/* 内填充 */
.pt-5{padding-top:5px}/*上填充5像素*/
.pt-10{padding-top:10px}/*上填充10像素*/
.pt-15{padding-top:15px}/*上填充15像素*/
.pt-20{padding-top:20px}/*上填充20像素*/

.pb-5{padding-bottom:5px}/*下填充5像素*/
.pb-10{padding-bottom:10px}/*下填充10像素*/
.pb-15{padding-bottom:15px}/*下填充15像素*/
.pb-20{padding-bottom:20px}/*下填充20像素*/

.pl-5{padding-left:5px}/*左填充5像素*/
.pl-10{padding-left:10px}/*左填充10像素*/
.pl-15{padding-left:15px}/*左填充15像素*/
.pl-20{padding-left:20px}/*左填充20像素*/

.pr-5{padding-right:5px}/*右填充5像素*/
.pr-10{padding-right:10px}/*右填充10像素*/
.pr-15{padding-right:15px}/*右填充15像素*/
.pr-20{padding-right:20px}/*右填充20像素*/

.pd-5{padding:5px}/*填充5像素*/
.pd-10{padding:10px}/*填充10像素*/
.pd-15{padding:15px}/*填充15像素*/
.pd-20{padding:20px}/*填充20像素*/

/* 边框 圆角 */
.border { border-style: solid; border-width: var(--border-width);}
.border-none { border: 0 }
.border-top { border-top-style: solid; border-top-width: var(--border-width);}
.border-right { border-right-style: solid; border-right-width: var(--border-width);}
.border-bottom { border-bottom-style: solid; border-bottom-width: var(--border-width);}
.border-left { border-left-style: solid; border-left-width: var(--border-width);}

.rounded { border-radius: var(--border-radius) }
.circle  { border-radius: 50% }
.not-rounded { border-radius: 0 }
.rounded-top    { border-radius: var(--border-radius) var(--border-radius) 0 0 }
.rounded-right  { border-radius: 0 var(--border-radius) var(--border-radius) 0 }
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) }
.rounded-left   { border-radius: var(--border-radius) 0 0 var(--border-radius) }

:root {
--border-width: 1px;
--border-radius: 4px;
}

/* 阴影 */
.box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}

/* 行内切割线 */
.pipe{margin:0 5px;color:#CCC}

/* 文字尺寸 */
.f-12{font-size:12px}
.f-14{font-size:14px}
.f-16{font-size:16px}
.f-18{font-size:18px}
.f-20{font-size:20px}
.f-24{font-size:24px}
.f-26{font-size:26px}
.f-28{font-size:28px}
.f-30{font-size:30px}

/* 行间距 */
.lh-16{line-height:16px}/*16像素行距*/
.lh-18{line-height:18px}/*18像素行距*/
.lh-20{line-height:20px}/*20像素行距*/
.lh-22{line-height:22px}/*22像素行距*/
.lh-24{line-height:24px}/*24像素行距*/
.lh-26{line-height:26px}/*26像素行距*/
.lh-28{line-height:28px}/*28像素行距*/
.lh-30{line-height:30px}/*30像素行距*/

/* 文字颜色 */
/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}

/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}

/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}

/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}

/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}

/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}

/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}

/*辅助色—灰色*/
.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}

/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}

/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{color:green}

/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}

/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}

/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}

/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}

/* 上标 下标 */
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}

/* flexbox */
.flex { display: flex }
@media (--breakpoint-sm) {
    .sm-flex { display: flex }
}
@media (--breakpoint-md) {
    .md-flex { display: flex }
}
@media (--breakpoint-lg) {
    .lg-flex { display: flex }
}
.flex-column  { flex-direction: column }
.flex-wrap    { flex-wrap: wrap }

.items-start    { align-items: flex-start }
.items-end      { align-items: flex-end }
.items-center   { align-items: center }
.items-baseline { align-items: baseline }
.items-stretch  { align-items: stretch }

.self-start    { align-self: flex-start }
.self-end      { align-self: flex-end }
.self-center   { align-self: center }
.self-baseline { align-self: baseline }
.self-stretch  { align-self: stretch }

.justify-start   { justify-content: flex-start }
.justify-end     { justify-content: flex-end }
.justify-center  { justify-content: center }
.justify-between { justify-content: space-between }
.justify-around  { justify-content: space-around }
.justify-evenly  { justify-content: space-evenly }

.content-start   { align-content: flex-start }
.content-end     { align-content: flex-end }
.content-center  { align-content: center }
.content-between { align-content: space-between }
.content-around  { align-content: space-around }
.content-stretch { align-content: stretch }

.flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0; }
.flex-none { flex: none }

.order-0 { order: 0 }
.order-1 { order: 1 }
.order-2 { order: 2 }
.order-3 { order: 3 }
.order-last { order: 99999 }

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);